<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" :value="ms1" @click="run">
        <input type="button" :value="ms2" @click="stop">
        <!--<h3 v-cloak>{{msg}}</h3>-->
        <h3 v-text="msg"></h3>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                ms1:'浪起来',
                ms2:'低调低调',
                msg:'猥琐发育，别浪~~！',
                setInterval : null
            },
            methods:{
                //run()  ====  run : function()
                run(){
                    //substring(int beginIndex, int endIndex)
                    //第一个int为开始的索引，对应String数字中的开始位置，
                    //第二个是截止的索引位置，对应String中的结束位置
                    _this= this;
                    //不让定时器叠加
                    if(this.setInterval != null) return;
                   this.setInterval = setInterval(   function () {
                       //msg的第一个字符
                       var start = _this.msg.substring(0,1);
                       //msg后面的所有的字符
                       var end = _this.msg.substring(1);
                       _this.msg = end +start
                   },200);

                },

                stop(){
                    clearInterval(this.setInterval);
                    //每次关闭时重新赋值null，以便下次开启
                    this.setInterval = null;
                }
            }
        });
    </script>
</body>
</html>